<style lang="less" scoped>
@import "../assets/css/config.less";

.index {
  background: #f8f8f9;
}
.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.question_list {
  width: 1000px;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.ques_content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.xuanxiang {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.card_row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.edit_out {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}
.left {
  text-align: left;
}
.title{
  font-weight: 700;
  text-align: left;
  margin-bottom: 5px;
  color: #222;
  margin-bottom: 10px;
}
.point-title{
  font-weight: 550;
  color: #444;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 999;
}
.button{
  margin-top: 15px;
  border: 1px solid @color1;
  outline: none;
  width: 80px;
  line-height: 32px;
  background-color: @color1;
  color: @white;
  font-size: 14px;
  border-radius: 4px;
  &:hover{
    background-color: @color2;
    color: @white;
  }
  &:active{
    background-color: @color3;
    color: @white;
  }
}
</style>
<style lang="less">
  .ivu-divider-horizontal{
    margin: 10px 0;
  }
  
</style>
<template>
  <div id="index">
    <div class="header">
      <myheader></myheader>
    </div>
    <Layout style="margin-top: 60px" id="content">
      <Layout :style="{padding: '0 24px 24px','background-color': 'white','min-width': '1210px'}">
        <div style="padding: 15px 6px 20px">
          <my-breadcrumb :prop="breadcrumbList"></my-breadcrumb>
        </div>
        <div class="question_list">
          <div v-if="questions.length === 0 && attachedQuestion.length === 0">
            <h3>你的错题本里还没有题目哦，先去“教程”部分做题吧(做错的题会自动记录到这里哦)~</h3>
            <button class="button" @click="toLesson">去教程</button>
          </div>
          <div v-for="ques in attachedQuestion" class="card_row" :key="ques.question_content._id">
            <Card style="width:100%; margin-bottom: 20px">
              <div class="title">
                <span v-if="ques.lesson==='ydhlw'">移动互联网 </span>
                <span v-if="ques.lesson==='js'">JavaScript </span>
                <span v-if="ques.lesson==='wx'">微信小程序 </span>
                <span>{{ques.menuTitle}}  {{ques.menuSubtitle}} </span>
                <span class="point-title">  ——  {{ques.question_content.title}}</span>
              </div>
              <div class="ques_content">
                <div class="left" v-html="ques.question_content.practice.question_editor_Content"></div>
                <Divider />
                <div v-if="ques.question_content.practice.type === 'panduan'">
                  <strong>答案：</strong>
                  <p v-if="ques.question_content.practice.answer === 'yes'">正确</p>
                  <p v-if="ques.question_content.practice.answer === 'no'">错误</p>
                </div>
                <div class="xuanxiang" v-if="ques.question_content.practice.type === 'xuanze'">
                  <div v-for="(item, index) in ques.question_content.practice.items" :key="item">
                  <span v-if="index === 0">A</span>
                  <span v-if="index === 1">B</span>
                  <span v-if="index === 2">C</span>
                  <span v-if="index === 3">D</span>
                  <span v-if="index === 4">E</span>
                  <span v-if="index === 5">F</span>
                  <span v-if="index === 6">G</span>
                  <span v-if="index === 7">H</span>
                  <span v-if="index === 8">I</span>
                  <span v-if="index === 9">J</span>
                  <span>{{item}}</span>
                    </div>
                </div>
                <div v-if="ques.question_content.practice.type === 'xuanze'">
                  <strong>答案：</strong>
                  <p v-for="(ans, key) in ques.question_content.practice.answer" :key="key">
                    <span v-if="ans === '1'">A</span>
                    <span v-if="ans === '2'">B</span>
                    <span v-if="ans === '3'">C</span>
                    <span v-if="ans === '4'">D</span>
                    <span v-if="ans === '5'">E</span>
                    <span v-if="ans === '6'">F</span>
                    <span v-if="ans === '7'">G</span>
                    <span v-if="ans === '8'">H</span>
                    <span v-if="ans === '9'">I</span>
                    <span v-if="ans === '10'">J</span>
                  </p>
                </div>
                <Divider />
                <strong>答案解析：</strong>
                <div class="left" v-html="ques.question_content.practice.illustrationContent"></div>
              </div>
            </Card>
          </div>
          <div v-for="(ques,index) in questions" class="card_row" :key="index">
            <Card style="width:100%;margin-bottom: 20px">
              <div class="title">
                <span v-if="ques.lesson==='js'">JavaScript </span>
                <span v-if="ques.lesson==='wx'">微信小程序 </span>
                <span>{{ques.menuTitle}}  {{ques.menuSubtitle}} </span>
                <span class="point-title"> —— {{ques.question_tltle}}</span>
              </div>
              <div class="ques_content">
                <div class="left" v-html="ques.question_content.question"></div>
                <Divider />
                <div v-if="ques.question_content.type === 'panduan'">
                  答案：
                  <p v-if="ques.question_content.answer[0] === 'yes'">正确</p>
                  <p v-if="ques.question_content.answer[0] === 'no'">错误</p>
                </div>
                <div class="xuanxiang" v-if="ques.question_content.type === 'xuanze'">
                  <div v-for="(item, index) in ques.question_content.items" :key="item">
                  <span v-if="index === 0">A</span>
                  <span v-if="index === 1">B</span>
                  <span v-if="index === 2">C</span>
                  <span v-if="index === 3">D</span>
                  <span v-if="index === 4">E</span>
                  <span v-if="index === 5">F</span>
                  <span v-if="index === 6">G</span>
                  <span v-if="index === 7">H</span>
                  <span v-if="index === 8">I</span>
                  <span v-if="index === 9">J</span>
                  <span>{{item}}</span>
                    </div>
                </div>
                <div v-if="ques.question_content.type === 'xuanze'">
                  答案：
                  <p v-for="(ans, key) in ques.question_content.answer" :key="key">
                    <span v-if="ans === '1'">A</span>
                    <span v-if="ans === '2'">B</span>
                    <span v-if="ans === '3'">C</span>
                    <span v-if="ans === '4'">D</span>
                    <span v-if="ans === '5'">E</span>
                    <span v-if="ans === '6'">F</span>
                    <span v-if="ans === '7'">G</span>
                    <span v-if="ans === '8'">H</span>
                    <span v-if="ans === '9'">I</span>
                    <span v-if="ans === '10'">J</span>
                  </p>
                </div>
                <Divider />答案解析：
                <div class="left" v-html="ques.question_content.illustrationContent"></div>
              </div>
            </Card>
          </div>
        </div>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import myBreadcrumb from "../components/myBreadcrumb.vue";
import { getErroredQuestion } from "../api/api";
export default {
  name: "questions",
  data: function() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "scroll"
      },
      menu: [],
      questions: [],
      attachedQuestion: [],
      section: "",
      userGroup: "",
      breadcrumbList: [
        {
          name: "首页",
          blod: true,
          to: "index",
        }, {
          name: "错题本",
        }
      ]
    };
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        let content_top = document.getElementById("content").offsetTop;
        this.bg.height = `${window.innerHeight - content_top}px`;
        this.bg.width = `${window.innerWidth}px`;
      })();
    };
    let content_top = document.getElementById("content").offsetTop;
    this.bg.height = `${window.innerHeight - content_top}px`;
    this.userGroup = JSON.parse(this.$store.state.user).userGroup;

    getErroredQuestion({ UUID: sessionStorage.UUID })
      .then(response => {
        if (response.state === true) {
          this.questions = response.result.extraQuestion;
          this.attachedQuestion = response.result.attachedQuestion;
        } else {
          this.$Message.error(response.msg);
        }
      })
      .catch(error => {
        this.$Message.error(error.status);
      });
  },
  components: {
    myheader: header,
    'my-breadcrumb': myBreadcrumb
  },
  methods: {
    toLesson(){
      this.$router.push({
        name: "index",
        params: {
          menu: "js,0,0"
        }
      });
    }
  }
};
</script>